<template>
	<view>
		<view class="header">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in images" :key="index">
				<image :src="item"></image>
			</swiper-item>
				</swiper>
		</view>
	</view>
	<view class="content">
		<view class="grid-item" @tap="getToNavgate(item.name)" v-for="(item,index) in nav" :key="index">
			<text class="iconfont icon-` + item.icon" :style="'color:'+ item.iconColor"></text>
			<view>{{item.text}}</view>
		</view>
	</view>
	</view>
	</template>
	
<script>
export default {
    data() {
        return {
            images: [
                "/static/images/1.jpg",
                "/static/images/2.jpg",
                "/static/images/3.jpg"
            ],
            nav: [
                {
                    icon: "meishi", // 响应式数据渲染到属性中，属性原本还有非变量的文本，将非变量文本用`把文本内容包裹
                    text: "美食",
                    name: "food",
                    iconColor: "red"
                },
                {
                    icon: "zhuangxiu",
                    text: "装修",
                    name: "zhuangxiu",
                    iconColor: ""
                },
                {
                    icon: "xiyu",
                    text: "洗浴",
                    name: "xiyu",
                    iconColor: ""
                },
                {
                    icon: "qiche",
                    text: "汽车",
                    name: "car",
                    iconColor: ""
                },
                {
                    icon: "changge",
                    text: "唱歌",
                    name: "sing",
                    iconColor: ""
                }
            ]
        }
    }
}
</script>

<script>
export default {
    data() {
        return {
            images: [
                "/static/images/1.jpg",
                "/static/images/2.jpg",
                "/static/images/3.jpg"
            ],
            nav: [
                {
                    icon: "meishi", 
                    text: "美食",
                    name: "food",
                    iconColor: "red"
                },
                {
                    icon: "zhuangxiu",
                    text: "装修",
                    name: "zhuangxiu",
                    iconColor: ""
                },
                {
                    icon: "xiyu",
                    text: "洗浴",
                    name: "xiyu",
                    iconColor: ""
                },
                {
                    icon: "qiche",
                    text: "汽车",
                    name: "car",
                    iconColor: ""
                },
                {
                    icon: "changge",
                    text: "唱歌",
                    name: "sing",
                    iconColor: ""
                },
                {
                    icon: "zhusu",
                    text: "住宿",
                    name: "zhusu",
                    iconColor: ""
                },
                {
                    icon: "boshimao",
                    text: "学习",
                    name: "study",
                    iconColor: ""
                },
                {
                    icon: "shiwu-gongwenbao",
                    text: "工作",
                    name: "work",
                    iconColor: ""
                },
                {
                    icon: "jiehunchoubei",
                    text: "结婚",
                    name: "marry",
                    iconColor: ""
                }
            ]
        }
    }
}
</script>